<template>
	<view class="account">
		<view class="headtop">
			<view class="headtitile">
				<image src="../../../static/images/left.png" @click="fanhui"></image>
				<text @click="fanhui">AI账号</text>
				<view @click="sendAuth" v-if="list.length < 5">授权</view>
			</view>
		</view>
		<view class="content" v-if="list.length">
			<view class="list clearfix" v-for="(item,index) in list" :key="index">
				<image :src="item.avatar" class="left fl"></image>
				<view class="center fl">{{item.name}}</view>
				<view class="right fr" @click="jiechubd(index)">解除绑定</view>
			</view>
		</view>
		<view class="empty" v-else>
			<image src="../../../static/images/empty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	const aweme = uni.requireNativePlugin('Ba-Aweme');
	import {
		request
	} from '@/api/request';
	
	export default {
		data() {
			return {
				list: [],
				code: '',
			}
		},
		onLoad() {
			this.init()
			
			let that = this;
			
			//用户信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.user_id = response.data.id;
			
				that.getList(this.user_id);
			}).catch((error) => {});
		},
		methods: {
			// 初始化
			init() {
				aweme.init({
						clientkey: 'aw5piajunpbrktby' // 需要到开发者网站申请
					},
					(res) => {
						
					});
			},
			// 授权登录
			sendAuth() {
				let that = this;
				
				aweme.sendAuth({
						scope: 'user_info',
						state: '123',
					},
					(res) => {
						if (res.data) {
							that.code = res.data.authCode;
							
							that.getMessage(that.code);
						}else{
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 3000
							})
						}
					});
			},
			getMessage(code){
				let that = this; 
				
				request({
					url: '/api/user/access_token',
					method: 'POST',
					data: {
						code: code,
					},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					uni.showToast({
						title: response.msg,
						icon: 'none'
					})
					
					setTimeout(function(){
						that.getList(that.user_id);
					},2000)
				}).catch((error) => {
					uni.showToast({
						title: error,
						icon: 'none',
					})
				});
			},
			getList(user_id) {
				request({
					url: '/api/user/cookielist',
					method: 'POST',
					data: {
						user_id: user_id,
					},
				}).then((response) => {
					this.list = response.data.list;
				}).catch((error) => {});
			},
			//解除绑定
			jiechubd(index) {
				let id = this.list[index].id;
				let that = this;
			
				uni.showModal({
					title: '提示', // 对话框标题
					content: '确定解除绑定么？', // 显示的内容
					success: function(res) {
						if (res.confirm) {
							request({
								url: '/api/user/cookiejiechu',
								method: 'POST',
								data: {
									id: id,
								},
							}).then((res) => {
								if (res.code == 1) {
									uni.showToast({
										title: '成功解除',
										icon: 'none'
									})
			
									that.getList(that.user_id);
								}
							}).catch((error) => {});
						} else if (res.cancel) {
			
						}
					}
				})
			},
			fanhui(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.account{
		width: 100%;
		margin: 0 auto;
		
		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 166rpx;
			z-index: 200;
		
			.headtitile {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 60rpx;
				left: 3%;
				height: 96rpx;
				line-height: 96rpx;
		
				image {
					width: 20rpx;
					height: 36rpx;
					float: left;
					margin-right: 18rpx;
					margin-top: 28rpx;
				}
		
				text {
					font-size: 32rpx;
					color: #FFFFFF;
					float: left;
					height: 96rpx;
					line-height: 96rpx;
				}
		
				view {
					font-size: 30rpx;
					color: #ECDEA4;
					float: right;
					height: 96rpx;
					line-height: 96rpx;
				}
			}
		}
		
		.content {
			width: 94%;
			margin: 0 auto 40rpx;
		
			.list {
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				background: #242831;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
		
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 22rpx;
					border: 1rpx solid #E8BD70;
					margin-top: 19rpx;
				}
		
				.center {
					height: 120rpx;
					line-height: 120rpx;
					width: 55%;
					font-size: 30rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #FFFFFF;
				}
		
				.right {
					height: 120rpx;
					line-height: 120rpx;
					font-size: 30rpx;
					color: #EB1313;
				}
			}
		}
		
		.empty{
			width: 94%;
			margin: 300rpx auto;
			text-align: center;
			
			image{
				width: 300rpx;
			}
		}
	}
</style>